<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>ajax_中断请求</title>
	</head>
	<body>
		<h2>该页面练习：中断请求</h2>
		<button onclick="getPersons()">获取人员列表</button>
		<button onclick="off()">中断请求</button>
		<div id="content"></div>
		
		<script type="text/javascript" >
				let xhr
				function getPersons(){
					//创建一个XMLHttpRequest的实例对象 —— 找来一个帮我们发请求的人
					xhr = new XMLHttpRequest()
					//绑定监听
					xhr.onreadystatechange = ()=>{
						if(xhr.readyState === 4 ){
							if(xhr.status >= 200 && xhr.status <=299){
								console.log('数据回来了',xhr.response)
							}
						}
					}
					//配置响应数据的格式
					xhr.responseType = 'json'
					//超时时间（毫秒）
					xhr.timeout = 5000
					//请求异常的回调
					xhr.onerror = ()=>{
						alert('请求异常，稍后再试')
					}
					//超时的回调
					xhr.ontimeout = ()=>{
						alert('网络不通畅，请求超时')
					}
					//指定发送请求的：方式、地址
					xhr.open('GET','http://127.0.0.1:5000/persons')
					//发送请求
					xhr.send()
				}
				
				function off(){
					xhr.abort()
				}
		</script>
	</body>
</html>